<!-- 页面 -->
<template>
    <div class="yong1">
        <el-row>
            <el-col :span="24">
                <div class="sp1">
                    姓名: <input v-model="username" placeholder="姓名" />
                    邮箱: <input v-model="email" placeholder="邮箱" />
                    手机号: <input v-model="shou" placeholder="手机号" />
                    <el-button type="primary">查询</el-button>
                </div>
                <div class="sp2">
                    <el-button type="primary">添加</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column fixed prop="date" label="姓名">
                            </el-table-column>
                            <el-table-column prop="name" label="邮箱">
                            </el-table-column>
                            <el-table-column prop="province" label="手机号">
                            </el-table-column>
                            <el-table-column prop="city" label="状态">
                            </el-table-column>
                            <el-table-column prop="address" label="创建时间">
                            </el-table-column>
                            <el-table-column prop="zip" label="更新时间">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="cha(scope.row)" type="text" size="small">详情</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            username: '',
            email: '',
            shou: '',
            tableData:[],
            current:1,
        }
    },
    //生命周期函数
    mounted() {
        // this.xuan()
    },
    // 调用方法
    methods: {
        xuan(){
            this.$axios.get('api/admin/users',{
                params:{
                    current:this.current,
                    name:this.username,
                    email:this.email,
                    phone:this.shou
                }
            }).then(res=>{
                console.log(res);
            })
        },
        cha(row){
            
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.yong1 {
    width: 100vh;
    height: 90vh;
    margin: auto;
    margin-top: 20px;
    background: white;
}

.yong1 .sp1 {
    width: 73vw;
    height: 80px;
    /* background: darkblue; */
    padding-top: 20px;
}

.yong1 input {
    width: 200px;
    height: 30px;
}
</style>